<template>
  <div>
    <el-dialog
      :visible.sync="remarkVisible"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      append-to-body
      width="600px"
    >
      <template slot="title">
        <div class="tishi">
          <span>{{ titles }}</span>
        </div>
      </template>
      <div>
        <p class="title-p">选择需要清空的违规：</p>
        <div>
          <el-checkbox-group v-model="user_id">
            <el-checkbox
              class="vm-checkbox"
              v-for="(item, index) in detailData"
              :key="index"
              :label="item.field"
              :value="item.field"
            >
              <div class="vm-checkbox-cxt">{{ item.name }}</div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="foot-btn">
        <div class="form-group">
          <el-button
            type="primary"
            class="btn btn-success btn-block"
            @click="onConfirm"
          >
            确定
          </el-button>
        </div>
        <div class="form-group">
          <el-button
            class="btn btn-success btn-block close-btn"
            @click="cancel"
          >
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      remarkVisible: false,
      detailData: [],
      user_id: [],
      titles: '',
      emptyid: ''
    }
  },
  methods: {
    // 父组件触发的方法
    showModal(functionName) {
      this.remarkVisible = true
      this.user_id = []
      this.detailData = functionName.detailData
      if (functionName.emptyid) {
        this.titles = '清空违规次数'
        this.emptyid = functionName.emptyid
      } else {
        this.titles = '一键清空'
        this.emptyid = ''
      }
    },
    // 点击确认
    async onConfirm() {
      if (this.user_id.length == 0) {
        this.$message.warning('请选择需要清空的违规')
      } else {
        let claearData = {}
        if (this.emptyid) {
          claearData = {
            user_id: this.emptyid,
            node: this.user_id.join(',')
          }
        } else {
          claearData = {
            node: this.user_id.join(',')
          }
        }
        try {
          let res = await this.request({
            url: '/admin/userInfo/clearViolate',
            method: 'post',
            loading: true,
            data: { ...claearData }
          })
          if (res) {
            this.remarkVisible = false
            this.$message.success(res.msg)
            let that = this
            setTimeout(() => {
              that.$emit('ongetList')
            }, 1000)
          }
        } catch (err) {
          this.errorHandler(err)
        }
      }
    },
    // 点击取消
    cancel() {
      this.remarkVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.foot-btn {
  display: flex;
  margin-top: 30px;
  justify-content: center;
}
.close-btn {
  background: #f2f2f2;
  border-radius: 5px;
  color: #666666;
}
.title-p {
  font-size: 16px;
  margin-bottom: 20px;
}
/deep/.el-checkbox__input .el-checkbox__inner {
  border-radius: 0% !important;
}
.vm-checkbox{
  margin-bottom: 10px;
}
</style>
